<template>
	<div class="My">
		<div class="My-warpper">
			<scroll class="My-content" ref="scroll">
				<div>
					
					<div class="My-user">
						<div class="user-headImg">
							<div class="user-headImg-circle">
								<div class="user-headImg-circleBg"></div>
								<div class="iconfont icon-zhaoxiang"></div>
							</div>
						</div>
						<div class="user-userName"></div>
						<div class="user-detail1"></div>
						<div class="user-detail2"></div>
					</div>
					
				</div>
			</scroll>
		</div>
		
		<app-footer actived="My"></app-footer>
	</div>
</template>

<script>
	import AppFooter from 'base/app-footer/app-footer.vue';
	import Scroll from 'base/Scroll/Scroll.vue';
	
	export default {
		components: {
			'app-footer': AppFooter,
			'scroll': Scroll
		}
	}
</script>

<style scoped lang="scss">
	.My {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		.My-warpper {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 40px;
			overflow: hidden;
			.My-content {
				width: 100%;
				height: 100%;
				background-color: rgb(235, 234, 228);
				overflow: hidden;
				.My-user {
					width: 100%;
					background-color: white;
					padding-top: 10%;
					.user-headImg {
						width: 100%;
						overflow: hidden;
						.user-headImg-circle {
							width: 80px;
							height: 80px;
							border-radius: 40px;
							border: 5px solid rgb(195, 173, 136);
							box-sizing: border-box;
							margin: 0 auto;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							.user-headImg-circleBg {
								width: 60px;
								height: 60px;
								background-color: rgb(239, 239, 244);
								border-radius: 30px;
								position: absolute;
								left: 0;
								right: 0;
								top: 0;
								bottom: 0;
								margin: auto;
							}
							> .iconfont {
								width: 30px;
								height: 30px;
								font-size: 30px;
								color: rgb(197, 176, 142);
								position: absolute;
								left: 0;
								right: 0;
								top: 0;
								bottom: 0;
								margin: auto;
							}
						}
					}
				}
			}
		}
	}
</style>